<template>
	<div style='padding:24px;'>
		<button class='btn btn-hover' @click='addapp'>创建应用</button>
		<Row style='margin-right: -24px' v-if='appList.length'>
			<Col :span='span' class='col-card' v-for='item in appList' :key='item' @click.native='toData(item)'>
				<Card class='card-border'>
	                <div style='padding:10px 10px 0 10px;cursor:pointer;'>
	                    <div style='overflow:hidden;position:relative'>
	                    	<div class='app-name'>{{item.baas.name}}</div>
	                    	<div class='app-biaoqian'>{{item.charges.type}}</div>
	                    	<p v-show='item.status==0' class='app-qianfei'>已欠费</p>
	                    </div>
	                    <div class='app-info'>
	                    	<div>
	                    		<div>{{item.totalLog.request || 0}}</div>
	                    		<div>请求</div>
	                    	</div>
	                    	<div>
	                    		<div>{{item.totalLog.flow  || 0}}</div>
	                    		<div>流量</div>
	                    	</div>
	                    	<div>
	                    		<div>{{item.totalLog.storage  || 0}}</div>
	                    		<div>存储</div>
	                    	</div>
	                    	<div>
	                    		<div>{{item.totalLog.debug  || 0}}</div>
	                    		<div>调试</div>
	                    	</div>
	                    </div>
	                    <Row style='color:#bbb'>
	                    	<Col span='21'>
	                    		<i class='iconfont icon-icon-test6' style='font-size: 32px' v-show='item.engine!=0'></i>&nbsp;
	                    	</Col>
	                    	<Col span='3' style='text-align:right'>
	                    		<i class='iconfont icon-icon-test11' style='font-size: 36px'></i>
	                    	</Col>
	                    </Row>
	                </div>
	            </Card>
			</Col>
		</Row>
		<Row style="text-align: center;margin-top:200px" v-else>
            <Row>
                <Col :span="8">&nbsp;</Col>
                <Col :span="8">
                	<Icon type="android-notifications-none" color="#39f" size="93"></Icon>
                </Col>
            </Row>
            <Row style="margin-top: 12px;">
                <Col :span="8">&nbsp;</Col>
                <Col :span="8">
                	未发现应用，请先 <a @click='addapp'>创建应用</a>
                </Col>
            </Row>
        </Row>
		
		<!-- 创建应用 -->
		<Modal v-model="modal" width="600">
	        <p slot="header">
	            <span>创建应用</span>
	        </p>
	        <div style='margin-bottom: 24px'>
	            <Form :label-width='70'>
                    <FormItem label='名称'>
                    	<Input v-model='name' :maxlength="20" placeholder='请输入名称'></Input>
                    </FormItem>
                    <FormItem label='云引擎'>
                    	<i-switch size="large" v-model='engine' :disabled='version_icon!=2' :class='{"engine-switch":version_icon!=2}'>
					        <span slot="open">开启</span>
					        <span slot="close">关闭</span>
					    </i-switch>
                    </FormItem>
                </Form>
                <Card class='version' @click.native='selectVersion(index,item.id)' v-for='(item,index) in chargeList' :key='index'>
                	<Icon type="checkmark-circled" class='version-icon' style='font-size:28px' v-if='version_icon==index'></Icon>
                	<Icon type="ios-circle-outline" class='version-icon' color='#d7dde7' v-else></Icon>

                	<div class='version-wrap'>
                		<div style='font-size:18px;color:#464C5B'>{{item.type}}</div>
                		<div style='color:#657180'>{{item.subtitle}}</div>
                		<!-- <div style='font-size:12px;color:#657180;margin-top: 2px' v-show='version_icon==index'>
                			<span>请求次数 <span style='color:#F68250'> {{item.request ? `${item.request} /天` : `￥${item.request_price} /万次`}} &nbsp;</span> </span> 
                			<span>请求流量 <span style='color:#F68250'> {{item.flow ? `${item.flow} GB /天` : `￥${item.flow_price} /GB`}} &nbsp;</span> </span>
                			<span> 文件存储 <span style='color:#F68250'> {{item.storage ? `${item.storage} GB` : `￥${item.storage_price} /GB / 天`}} &nbsp;</span> </span> 
                			<span> 云引擎 <span style='color:#F68250'> {{item.engine ? `￥${item.engine}/ 天` :  '支持'}} &nbsp;</span> </span> 
                		</div> -->
                	</div>
                </Card>
            	<a class='version-price' href='https://cloud.qingful.com/doc/#/zh-cn/feeScale' target='_blank'>查看定价方案</a>
	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' v-if="!is_click" @click="sure">确认</button>
	            <button class='btn-sure' v-if="is_click">确认</button>
	        </div>
	    </Modal>
	    <div class='coupon-mask' v-show='coupon_modal'>
	    	<div class='coupon-wrap'>
	    		<img src="../../../images/60.png">
	    		<i class='iconfont icon-guanbi coupon-close' @click='couponClose'></i>
	    		<div class='coupon-get' @click='getCoupon'>立即领取</div>
	    	</div>
	    </div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				// screenWidth: document.body.clientWidth,   // 这里是给到了一个默认值
				modal:false,
				span:8,
				name:'',
				appList:[],
				chargeList:[],
				chargesId:0,
				is_click:false,
				version_icon:0,
				engine:true,
				coupon_modal:false
			}
		},
		created(){
			this.$localStorage.remove('app_name')
			this.$localStorage.remove('BaasToken')
	        this.getData();
	  //       this.fetch('/home/charges').then(res=>{
			// 	if(res&&res.data.data&&res.data.code){
			// 		this.chargeList = res.data.data;
					
			// 		this.chargesId = this.chargeList[0].id;
			// 	}
			// })
		},
   // 		mounted () {
   //          const that = this
   //          window.onresize = () => {
   //              return (() => {
   //                  window.screenWidth = document.body.clientWidth
   //                  that.screenWidth = window.screenWidth
   //              })()
   //          }
   //      },
   //      watch: {
   //          screenWidth (val) {
   //           	this.screenWidth = val
   //           	if(this.screenWidth <= 768){
   //           		this.span = 8;
   //           	}else{
   //           		this.span = 6;
   //           	}
   //          }
   //      },
		methods:{
			getData(){
				this.fetch('/home/apps').then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.appList = res.data.data.appList;

						this.chargeList = res.data.data.charges;
						this.chargesId = this.chargeList[0].id;
						for(let key in this.appList){
							if(this.appList[key].charges.type.split('（')[0]){
								this.appList[key].charges.type = this.appList[key].charges.type.split('（')[0];
							}
						}
						//未领优惠券
						if(res.data.data.isGetCoupon == 0){
							this.coupon_modal = true;
						}
					}
				})
			},
			//创建应用
			addapp(){
				this.is_click = false;
				this.modal = true;
				this.name = '';
				this.version_icon = 0;
				this.chargesId = this.chargeList[0].id;
			},
			selectVersion(index,id){
				this.version_icon = index;
				this.chargesId = id;

				this.engine = true; 
			},
			sure(){
				if(!this.name){
					this.$Message.warning('请填写应用名字')
					return;
				}
				//创建应用
				this.fetch('/home/appAdd',{
					name:this.name,
					engine:this.engine ? 1 : 0,
					chargesId:this.chargesId
				}).then(res=>{
					this.is_click = true;
					if(res&&res.data.data&&res.data.code){
						this.modal = false;
						this.getData();
					}
				})
			},
			cancel(){
				this.modal = false;
			},
			toData(item){
				this.$router.push('/home/statistic/statistic')
				this.$localStorage.set('app_name',item.baas.name)
				this.$localStorage.set('BaasToken',item.baas_token)
				this.$localStorage.set('appid',item.baas.appid)
				// this.$localStorage.set('appkey',item.appkey)
			},
			//领取优惠券
			getCoupon(){
				this.fetch('/home/getCoupon',{}).then((res)=>{
					if(res&&res.data.code){
						this.coupon_modal = false;
						this.$Message.success('领取成功')
					}
				})
			},
			couponClose(){
				this.coupon_modal = false;
			}
		}
	}
</script>
<style scoped>
.app-name{
	display: inline-block;
	font-size:20px;
	color:#1c2438;
	max-width:180px;
	height:30px;
	overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis
}

.app-biaoqian{
	display: inline-block;
	width: 55px;
	border: 1px solid #06A0FD;
    border-radius: 3px;
    color: #06A0FD;
    font-size: 14px;
    line-height: 22px;
    height: 24px;
    text-align: center;
    padding: 0 3px;
    overflow: hidden;
    margin-left: 8px;
    position: absolute;
    top:3px;
}
.app-qianfei{
	color:#FA3333;
	float:right;
	line-height: 28px
}
.app-info{
	text-align:center;
	margin: 20px 10px;
	font-size:16px;
	display:flex;
	justify-content:space-between
}
.col-card{
	margin-bottom: 24px;
	padding-right: 24px;
}
.cost-hint{
	font-size:13px;
	color:#657180;
	margin-top:-10px
}

.coupon-mask{
	position: fixed;
	top:0;
	left:0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .5);
	z-index:10000;
}
.coupon-wrap{
	width:472px;
	height:410px;
	position:relative;
	top:50%;
	left: 50%;
	margin-top: -205px;
	margin-left: -236px;
	text-align:center
}
.coupon-get{
	margin-top: 20px;
	margin-left: 128px;
	width:182px;
	height:46px;
	line-height: 46px;
	font-size:22px;
	background:rgba(255, 225, 46, 0.9);
	border-radius:23px;
	color:rgba(249, 81, 75, 0.9);
	cursor:pointer
}
.coupon-get:hover{
	background:rgba(255, 225, 46, 1);
	color:rgba(249, 81, 75, 1);
}
.coupon-close{
	position: absolute;
	top:-25px;
	right:40px;
	font-size: 30px;
	z-index: 10001;
	cursor: pointer;
	color:rgba(255, 255, 255, 0.8);
}
.coupon-close:hover{
	color:rgba(255, 255, 255, 1);
}
</style>
<style type="text/css">
	.ivu-modal-header{
		padding:40px 40px 18px!important;
		border:0!important;
	}
	.ivu-modal-header p{
		font-weight: 600!important;
		font-size:18px!important;
		color:#464C5B!important
	}
	.ivu-modal-close{
		top:30px !important;
		right: 40px !important;
	}
	.ivu-modal-body{
		padding:18px 40px 16px!important;
	}
	.ivu-modal-footer{
		border:0 !important;
		padding:0px 40px 40px!important;
	}
	.ivu-modal-footer button+button {
	    margin-left: 12px!important;
	}
	.ivu-input{
		height:40px!important;
	}
	textarea.ivu-input {
		height: auto !important;
	}
	.ivu-form .ivu-form-item-label{
		font-size: 14px!important;
		padding: 10px 20px 10px 0!important;
	}

	.card-border.ivu-card-bordered{
		border:0!important;
	}
	.btn{
		margin-bottom: 30px;
		width:94px;
		height:32px;
		line-height: 32px;
		background:#06A0FD;
		color:#fff;
		font-size: 13px;
		border-radius: 16px;
		text-align:center;
		cursor:pointer;
	}
	
	.btn-cancel{
		width:120px;
		height:40px;
		line-height: 40px;
		border-radius: 20px;
		color:#06A0FD;
		border:1px solid #06A0FD;
		background: #fff;
		font-size: 14px;
	}
	.btn-sure{
		width:120px;
		height:40px;
		line-height: 40px;
		border-radius: 20px;
		color:#fff;
		border:1px solid #06A0FD;
		background: #06A0FD;
		font-size: 14px;
	}
	.btn:hover,
	.btn-sure:hover{
		background: rgba(26,160,253,0.9);
	}
	.btn-hover:hover{
		box-shadow: 0px 2px 6px 0px rgba(26,160,253,0.4);
	}
	.btn:active,
	.btn-sure:active{
		background:#06A0FD;
	}
	.btn-cancel:hover{
		border:1px solid rgba(26,160,253,0.7);
		color:rgba(26,160,253,0.7);
	}
	.btn-cancel:active{
		border:1px solid #06A0FD;
		color:#06A0FD;
	}
	.version.ivu-card:hover {
		box-shadow: 0 0px 8px #d6edff !important;
	}
	.ivu-switch-checked{
		border-color: #06A0FD!important;
		background-color: #06A0FD!important;
	}
	.version{
	cursor:pointer;
	margin-bottom: 15px;
	}
	.version-icon{
		display:inline-block;
		vertical-align: middle;
		font-size:30px;
		color:#06A0FD
	}
	.version-wrap{
		margin-left: 15px;
		display:inline-block;
		vertical-align: middle
	}
	.version-price{
		color:#657180;
		cursor:pointer
	}
	.version-price:hover{
		color: #06A0fD
	}
	.engine-switch.ivu-switch-checked{
		border-color: #f3f3f3!important;
    	background-color: #f3f3f3!important;
	}
</style>
